/**底部导航栏组件样式**/
.switch-bar-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: white;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  border-top: 1rpx solid rgba(0, 0, 0, 0.05);
}

.switch-bar {
  display: flex;
  height: 120rpx;
  background: white;
  position: relative;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15rpx 10rpx;
  transition: all 0.15s ease; /* 减少动画时间，提升响应速度 */
  position: relative;
  cursor: pointer;
}

.tab-item:active {
  background: rgba(0, 0, 0, 0.05);
}

.tab-icon {
  margin-bottom: 8rpx;
  transition: transform 0.15s ease; /* 减少动画时间 */
}

.icon-emoji {
  font-size: 40rpx;
  opacity: 0.6;
  transition: all 0.15s ease; /* 减少动画时间 */
  display: block;
}

.tab-label {
  font-size: 22rpx;
  color: #999;
  transition: all 0.15s ease; /* 减少动画时间 */
  font-weight: 400;
  text-align: center;
  display: block;
}

.tab-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 6rpx;
  background: linear-gradient(90deg, #FF6B35, #FF8A50);
  border-radius: 3rpx;
  opacity: 0;
  transition: all 0.2s ease; /* 稍微快一点的动画 */
}

/* 激活状态样式 */
.tab-item.active .icon-emoji {
  opacity: 1;
  transform: scale(1.1);
}

.tab-item.active .tab-label {
  color: #FF6B35;
  font-weight: 600;
}

.tab-item.active .tab-indicator.show {
  opacity: 1;
}

/* 流光小队标签页的特殊样式 */
.tab-item.active.team-tab .tab-indicator {
  background: linear-gradient(90deg, #667eea, #764ba2);
}

.tab-item.active.team-tab .tab-label {
  color: #667eea;
}

/* 安全区域适配 */
.safe-area-bottom {
  height: env(safe-area-inset-bottom);
  background: white;
}

/* 动画效果 */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: scale(1);
  }
  40%, 43% {
    transform: scale(1.15);
  }
  70% {
    transform: scale(1.05);
  }
  90% {
    transform: scale(1.02);
  }
}

.tab-item.active .icon-emoji {
  animation: bounce 0.6s ease;
}

/* 波纹点击效果 */
.tab-item {
  position: relative;
  overflow: hidden;
}

.tab-item::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 107, 53, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease; /* 减少波纹动画时间 */
}

.tab-item:active::after {
  width: 200rpx;
  height: 200rpx;
}

/* 流光小队的波纹效果 */
.tab-item.team-tab::after {
  background: rgba(102, 126, 234, 0.2);
}

/* 响应式设计 */
@media (max-width: 600rpx) {
  .icon-emoji {
    font-size: 36rpx;
  }
  
  .tab-label {
    font-size: 20rpx;
  }
  
  .switch-bar {
    height: 110rpx;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .switch-bar-container {
    background: #1a1a1a;
    border-top-color: rgba(255, 255, 255, 0.1);
  }
  
  .switch-bar {
    background: #1a1a1a;
  }
  
  .tab-label {
    color: #666;
  }
  
  .tab-item.active .tab-label {
    color: #FF6B35;
  }
  
  .tab-item.active.team-tab .tab-label {
    color: #667eea;
  }
  
  .safe-area-bottom {
    background: #1a1a1a;
  }
}

/* 提供外部扩展样式的支持 */
.switch-bar-container.custom-style {
  /* 预留给外部自定义样式的空间 */
}